<template>
  <div>
    <el-container class="manager-container">
      <!-- this is manager page -->
      <!-- 导航菜单上的湖大logo -->
      <el-header class="header shadow">
        <!-- Header content -->
        <div class="left-logo">
          <img src="../../assets/imgs/home/hubu_logo.png" alt="">
        </div>

        <div class="right-bar">
          <!-- 这里设置折叠的功能 -->
          <div class="el-icon-s-fold elicon" >
          </div>
          <div class="bar-title">
            后台管理系统
          </div>
        </div>

        <!-- 用户管理区 -->
        <div class="user-info">
          <!-- <img src="" alt=""> -->
          <i class="el-icon-s-custom"></i>

          <el-dropdown trigger="click">
            <!-- <span class="el-dropdown-link">
              下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
            </span> -->
            <div class="user el-dropdown-link">{{ loginUser }}</div>
            <div class="arrow el-icon-caret-bottom"></div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item divided @click.native="editUserPassword()">修改密码</el-dropdown-item>
              <!-- <el-dropdown-item disabled>双皮奶</el-dropdown-item> -->
              <el-dropdown-item divided @click.native="Logout()">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </div>
      </el-header>

      <el-dialog
        title="修改用户密码"
        :visible.sync="editPasswordDialog"
        width="30%"
        :before-close="handleClose">
        <el-form :model="currentUser" ref="editPasswordForm" :rules="editPasswordRules" label-width="80px" :inline="false" size="small">
          <el-form-item label="旧密码" prop="oldPassword">
            <el-input type="password" v-model="currentUser.oldPassword"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input type="password" v-model="currentUser.newPassword"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editPasswordSubmit()">确认</el-button>
            <el-button @click="editPasswordDialog = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 主体区域 -->
      <el-container>
        <!-- 侧边栏区域 -->
        <el-aside width="200px">
          <el-menu
            :router="true"
            :default-active="activeMenu"
            :collapse="isCollapse"
            background-color="#1E6F46"
            text-color="#ffffff"
            :unique-opened="true"
            active-text-color="#ffffff"
            :collapse-transition="false"
          >
            <!-- 一级菜单 -->
            <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
              <!-- 一级菜单的模版区域 -->
              <template slot="title">
                <i :class="iconsObject[item.id]"></i>
                <span>{{ item.name }}</span>
              </template>

              <!-- 二级菜单 -->
              <el-menu-item
              v-for="subItem in item.children"
              :index="subItem.path"
              :key="subItem.id">
                <template slot="title">
                  <!-- 使用空格填充前面的占位空间 -->
                  <span>&nbsp;&nbsp;&nbsp;&nbsp;{{ subItem.name }}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- Main content -->
          <!-- 这里写入一个router的占位符，用来动态调整主体内容 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      menuList: [
        {
          id: '1',
          name: '课程管理',
          children: [{
            id: '11',
            name: '课程安排',
            path: '/manager/course'
          }, {
            id: '12',
            name: '排课记录',
            path: '/manager/setcourse'
          }, {
            id: '13',
            name: '查询课程',
            path: '/manager/checkcourse'
          }]
        }, {
          id: '2',
          name: '考试管理',
          children: [{
            id: '21',
            name: '考试安排',
            path: '/manager/exam'
          },
          // {
          //   id: '22',
          //   name: '考试全览'
          // }
          ]
        }, {
          id: '3',
          name: '系统管理',
          children: [{
            id: '31',
            name: '字典管理',
            path: '/manager/system/dic'
          }, {
            id: '32',
            name: '用户管理',
            path: '/manager/system/user'
          },
          // {
          //   id: '33',
          //   name: '角色权限管理',
          //   path: '/manager/system/permission'
          // }
          ]
        }, {
          id: '4',
          name: '消息管理',
          children: [{
            id: '41',
            name: '人员管理',
            path: '/manager/msg/person'
          }, {
            id: '42',
            name: '荣誉管理',
            path: '/manager/msg/honor'
          }, {
            id: '43',
            name: '新闻管理',
            path: '/manager/msg/news'
          }]
        }
      ],
      iconsObject: {
        // 1: 'el-icon-user',
        1: 'el-icon-edit-outline',
        2: 'el-icon-tickets',
        3: 'el-icon-setting',
        4: 'el-icon-bell'
      },
      isCollapse: false,
      activeMenu: '用户管理',
      loginUser: '您好',
      currentUser: {},
      editPasswordDialog: false,
      //表单验证
      editPasswordRules: {
        oldPassword: [
          { required: true, message: '旧密码输入错误！', trigger: 'blur'}
        ],
        newPassword: [
          { required: true, message: '新密码不能为空！', trigger: 'blur'}
        ],
      },
    }
  },
  created () {
    // console.log('')
  },
  methods: {
    async Logout () {
      // 登出时调用用户登出的接口
      const { data: res } = await this.$http.post('/user/logout')
      console.log(res)
      // 记得在这里删除token(登出就需要清除用户信息！)
      window.sessionStorage.clear()
      this.$router.push('/login')
      this.$message.success('登出成功!')
    },
    handleClose (done) {
      done()
    },
    editUserPassword () {
      this.editPasswordDialog = true
    },
    editPasswordSubmit () {
      this.currentUser.oldPassword = this.currentUser.oldPassword
      this.currentUser.newPassword = this.currentUser.newPassword
      this.$refs.editPasswordForm.validate(async valid => {
      if (!valid) return
      const { data: res } = await this.$http.post(`user/all/updatePassword?oldPassword=${this.currentUser.oldPassword}&newPassword=${this.currentUser.newPassword}`)
      console.log(res)
      if (!res.state) return this.$message.error(res.msg)
      this.$message.success('修改成功！')
      this.editStudentDialog = false
        })
    }
  }
}
</script>

<style lang="less" scoped>
.manager-container {
  height: 100vh;
  background-color: #f0f1f7;

  .el-header {
    // 根据整体的el-header来对右边的bar确定背景颜色
    background-color: #fff;
    display: flex;
    align-items: center;
    color: white;
    font-size: 20px;
    height: 60px !important;
    padding: 0;

    .left-logo {
      height: 100%;
      width: 200px;
      background-color: #1E6F46;
      display: flex;
      padding: 10px;
      box-sizing: border-box;
      align-items: center;

      img {
        width: 100%;
      }
    }

    .right-bar {
      position: absolute;
      display: flex;
      align-items: center;
      width: 50%;
      left: 200px;
      height: 80px;
      // background-color: gold;
      color: black;
      margin-left: 30px;

      .elicon {
        font-size: 30px;
        color: #666666;
      }

      .bar-title {
        font-size: 20px;
        padding-left: 20px;
      }
    }

    .user-info {
      width: 100px;
      height: 60px;
      position: absolute;
      right: 0;
      display: flex;
      align-items: center;
      border-left: 1px solid #ddd;
      padding-left: 15px;

      > i {
        display: block;
        border-radius: 50%;
        background-color: #1E6F46;
        font-size: 30px;
      }

      .el-dropdown {
        display: flex;
        align-items: center;

        .user {
          color: black;
          padding-left: 10px;
          font-size: 18px;
          cursor: pointer;
        }

        .arrow {
          color: black;
        }
      }
    }
  }

  .el-aside {
    background-color: #1c5a3b;

    .el-menu {
      border-right: none;
    }
  }
}
</style>
